<template>
  <Navigation class="nav-menu" />
  <RouterView />
</template>

<script setup lang="ts">
import { RouterLink, RouterView, useRouter } from 'vue-router'
import Navigation from './components/Navigation.vue';

const router = useRouter()
function goLogin() {
  router.push('/login')
}
</script>

<style>
* {
  box-sizing: border-box;
}

/* 根元素设置 - 建立高度链 */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Vue应用容器 */
#app {
  height: 100%;
  width: 100%;
}

/* 应用主容器 - flex布局核心 */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* 导航栏 */
.nav-menu {
  width: 100%;
  flex-shrink: 0;
}

/* 主内容区 - 关键的铺满设置 */
.main-content {
  flex: 1;
  width: 100%;
  min-height: 0; /* 解决flex子元素最小高度问题 */
  display: flex;
  flex-direction: column;
}

/* 确保RouterView占满空间 */
.main-content > :deep(div) {
  height: 100%;
  width: 100%;
}
</style>